function load() {
    init();
}

var num = 0;
function init() {
    $("#one").onkeyup = function () {
        getInput();
    }
    $("#btn").onclick = function () {
        getText();
    }

}
function getInput() {
    var str = $("#one").value;
    if (/^[\n\r, ]+/.test(str)) {
        return;
    }
    var tem = str.substring(0, str.length - 1);

    if (/[\n\r, ]+/.test(str) && !/[\n\r, ]+/.test(tem)) {
        var span = $("#tag1").children;
        for (var i = 0; i < span.length; i++) {
            if (tem === span[i].innerHTML) {
                return;
            }
        }
        num++;
        render(tem);
    }
}

function del(s) {
    if (/^(delete)/.test(s.innerHTML)) {
        return;
    }
    s.innerHTML = "delete" + s.innerHTML;
    s.style.backgroundColor = "red";
    s.onclick = function () {
        $("#tag1").removeChild(s);
    }
}
function render(str) {
    if (num > 10) {
        var move = $("#tag1").children[0];
        $("#tag1").removeChild(move);
    }
    var s = document.createElement("span");
    var node = document.createTextNode(str);
    s.appendChild(node);
    s.style.color = "white";
    s.style.backgroundColor = "blue";
    s.style.marginRight = 10 + "px";
    s.onmouseover = function () {
        del(s);
    }
    $("#tag1").appendChild(s);

}

function getText() {
    var text = $("#many").value.trim();
    var Array = text.split(/[^\da-zA-Z\u4e00-\u9fa5]+/).filter(function (ar) {
        if (ar === null) {
            return false;
        } else
        { return true; }
    });
    render2(Array);
}

function render2(Array) {
    var len = Array.length;
    for (var i = 0; i < len; i++) {
        var isDif = true;
        var child = $("#tag2").children;
        
        var num = child.length;
        for (var j = 0; j < num; j++) {
            if (Array[i] === child[j].innerHTML) {
                 

                isDif = false;
                break;
            }
        }
        if (isDif) {
            console.log(num);
            if (num >= 10) {
                
                $("#tag2").removeChild(child[0]);
            }
            var span = document.createElement("span");
            var node = document.createTextNode(Array[i]);
            span.appendChild(node);
            span.style.color = "white";
            span.style.backgroundColor = "green";
            span.style.marginRight = 10 + "px";
            $("#tag2").appendChild(span);
        }

    }

}
function $(el) {
    return document.querySelector(el);
}

